Reactã®ãã£ãã·ã¥ã¡ã«ããºã ãæ¢æ±ãã颿°çµæã®ãã£ãã·ã¥ã«çŠç¹ãåœãŠããã®å©ç¹ãå®è£ æŠç¥ãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹æé©åã®ããã®ãã¹ããã©ã¯ãã£ã¹ã解説ããŸãã
React Cache: 颿°çµæã®ãã£ãã·ã¥ã§ããã©ãŒãã³ã¹ãé£èºçã«åäž
ãŠã§ãéçºã®äžçã§ã¯ãããã©ãŒãã³ã¹ãæãéèŠã§ãããŠãŒã¶ãŒã¯ãã·ãŒã ã¬ã¹ãªäœéšãæäŸããé«éã§å¿çæ§ã®é«ãã¢ããªã±ãŒã·ã§ã³ãæåŸ ããŠããŸãããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãæ§ç¯ããããã®äººæ°ã®JavaScriptã©ã€ãã©ãªã§ããReactã¯ãããã©ãŒãã³ã¹ãæé©åããããã®ããã€ãã®ã¡ã«ããºã ãæäŸããŠããŸãããã®ãããªã¡ã«ããºã ã®äžã€ã颿°çµæã®ãã£ãã·ã¥ã§ãããããã«ããäžèŠãªèšç®ãå€§å¹ ã«åæžããã¢ããªã±ãŒã·ã§ã³ã®é床ãåäžãããããšãã§ããŸãã
颿°çµæã®ãã£ãã·ã¥ãšã¯ïŒ
颿°çµæã®ãã£ãã·ã¥ã¯ãã¡ã¢åãšããŠãç¥ããã颿°ã®åŒã³åºãçµæãä¿åïŒãã£ãã·ã¥ïŒããåãåŒæ°ã§ã®åŸç¶ã®åŒã³åºãã«åå©çšããæè¡ã§ããããã«ãããç¹ã«è€éãŸãã¯é »ç¹ã«åŒã³åºããã颿°ã«ãšã£ãŠèšç®ã³ã¹ããé«ãå¯èœæ§ã®ããã颿°ã®åå®è¡ãåé¿ããŸãã代ããã«ããã£ãã·ã¥ãããçµæãååŸãããæéãšãªãœãŒã¹ãç¯çŽããŸãã
ãã®ããã«èããŠã¿ãŠãã ããã倧ããªæ°å€é åã®åèšãèšç®ãã颿°ããããšããŸãããã®é¢æ°ãåãé åã§è€æ°ååŒã³åºããšããã£ãã·ã¥ããªããã°æ¯ååèšãåèšç®ããŸãããã£ãã·ã¥ãããã°ãåèšã¯äžåºŠã ãèšç®ãããåŸç¶ã®åŒã³åºãã§ã¯åã«ä¿åãããçµæãååŸããã ãã§ãã
Reactã§é¢æ°çµæã®ãã£ãã·ã¥ã䜿çšããçç±
Reactã¢ããªã±ãŒã·ã§ã³ã¯ãé »ç¹ã«åã¬ã³ããªã³ã°ãããã³ã³ããŒãã³ããå«ãããšããããããŸãããããã®åã¬ã³ããªã³ã°ã¯ãã³ã¹ãã®é«ãèšç®ãããŒã¿ååŸæäœãããªã¬ãŒããå¯èœæ§ããããŸãã颿°çµæã®ãã£ãã·ã¥ã¯ããããã®äžèŠãªèšç®ãé²ããããã€ãã®æ¹æ³ã§ããã©ãŒãã³ã¹ãåäžãããã®ã«åœ¹ç«ã¡ãŸãïŒ
- CPU䜿çšçã®åæžïŒåé·ãªèšç®ãé¿ããããšã§ããã£ãã·ã¥ã¯CPUãžã®è² è·ã軜æžããä»ã®ã¿ã¹ã¯ã®ããã«ãªãœãŒã¹ãè§£æŸããŸãã
- å¿çæéã®æ¹åïŒãã£ãã·ã¥ãããçµæã®ååŸã¯åèšç®ãããã¯ããã«é«éã§ãããããéãå¿çæéãšå¿çæ§ã®é«ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã«ã€ãªãããŸãã
- ããŒã¿ååŸã®æžå°ïŒé¢æ°ãAPIããããŒã¿ãååŸããå Žåããã£ãã·ã¥ã¯äžèŠãªAPIåŒã³åºããé²ãããããã¯ãŒã¯ãã©ãã£ãã¯ãåæžããŠããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸããããã¯ç¹ã«ã垯åå¹ ãéãããŠããããã¬ã€ãã³ã·ãé«ãã·ããªãªã§éèŠã§ãã
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžïŒããéããããå¿çæ§ã®é«ãã¢ããªã±ãŒã·ã§ã³ã¯ãããè¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸãããŠãŒã¶ãŒã®æºè¶³åºŠãšãšã³ã²ãŒãžã¡ã³ãã®åäžã«ã€ãªãããŸãã
Reactã®ãã£ãã·ã¥ã¡ã«ããºã ïŒæ¯èŒæŠèŠ
Reactã¯ããã£ãã·ã¥ãå®è£ ããããã®ããã€ãã®çµã¿èŸŒã¿ããŒã«ãæäŸããŠãããããããã«ç¬èªã®é·æãšãŠãŒã¹ã±ãŒã¹ããããŸãïŒ
React.cacheïŒå®éšçïŒïŒç¹ã«é¢æ°ããšãããããŒã¿ååŸé¢æ°ã®çµæããã¬ã³ããªã³ã°ãã³ã³ããŒãã³ããè¶ããŠãã£ãã·ã¥ããããã«ç¹å¥ã«èšèšããã颿°ã§ããuseMemoïŒèšç®çµæãã¡ã¢åããããã¯ã§ããäŸåé¢ä¿ã倿Žãããå Žåã«ã®ã¿å€ãåèšç®ããŸããuseCallbackïŒé¢æ°å®çŸ©ãã¡ã¢åããããã¯ã§ããäŸåé¢ä¿ã倿Žãããªãéããã¬ã³ããªã³ã°ãè¶ããŠåã颿°ã€ã³ã¹ã¿ã³ã¹ãè¿ããŸããReact.memoïŒã³ã³ããŒãã³ããã¡ã¢åããé«éã³ã³ããŒãã³ãã§ãpropsã倿ŽãããŠããªãå Žåã«åã¬ã³ããªã³ã°ãé²ããŸãã
React.cacheïŒå°çšã®é¢æ°çµæãã£ãã·ã¥ãœãªã¥ãŒã·ã§ã³
React.cacheã¯React 18ã§å°å
¥ãããå®éšçãªAPIã§ã颿°çµæããã£ãã·ã¥ããããã®å°çšã¡ã«ããºã ãæäŸããŸããç¹ã«ããŒã¿ååŸé¢æ°ã®ãã£ãã·ã¥ã«é©ããŠãããåºç€ãšãªãããŒã¿ã倿Žããããšãã«ãã£ãã·ã¥ãèªåçã«ç¡å¹åã§ããŸããããã¯ãéçºè
ãæåã§ãã£ãã·ã¥ã®ç¡å¹åã管çããå¿
èŠãããæåãã£ãã·ã¥ãœãªã¥ãŒã·ã§ã³ã«å¯ŸããéèŠãªå©ç¹ã§ãã
React.cacheã®ä»çµã¿ïŒ
- 颿°ã
React.cacheã§ã©ããããŸãã - ãã£ãã·ã¥ããã颿°ãç¹å®ã®åŒæ°ã»ããã§åããŠåŒã³åºããããšã颿°ãå®è¡ããããã®çµæããã£ãã·ã¥ã«ä¿åãããŸãã
- åãåŒæ°ã§ã®åŸç¶ã®åŒã³åºãã§ã¯ããã£ãã·ã¥ããçµæãååŸãããåå®è¡ãåé¿ãããŸãã
- Reactã¯ãåºç€ãšãªãããŒã¿ã倿Žãããããšãæ€åºãããšèªåçã«ãã£ãã·ã¥ãç¡å¹åãããã£ãã·ã¥ãããçµæãåžžã«ææ°ã§ããããšãä¿èšŒããŸãã
äŸïŒããŒã¿ååŸé¢æ°ã®ãã£ãã·ã¥
```javascript import React from 'react'; const fetchUserData = async (userId) => { // Simulate fetching user data from an API await new Promise(resolve => setTimeout(resolve, 500)); // Simulate network latency return { id: userId, name: `User ${userId}`, timestamp: Date.now() }; }; const cachedFetchUserData = React.cache(fetchUserData); function UserProfile({ userId }) { const userData = cachedFetchUserData(userId); if (!userData) { returnLoading...
; } return (User Profile
ID: {userData.id}
Name: {userData.name}
Timestamp: {userData.timestamp}
ãã®äŸã§ã¯ãReact.cacheãfetchUserData颿°ãã©ããããŠããŸããUserProfileãç¹å®ã®userIdã§åããŠã¬ã³ããªã³ã°ããããšãfetchUserDataãåŒã³åºããããã®çµæããã£ãã·ã¥ãããŸããåãuserIdã§ã®åŸç¶ã®ã¬ã³ããªã³ã°ã§ã¯ããã£ãã·ã¥ãããçµæãååŸãããå¥ã®APIåŒã³åºããåé¿ãããŸããReactã®èªåãã£ãã·ã¥ç¡å¹åã«ãããå¿
èŠã«å¿ããŠããŒã¿ãæŽæ°ãããããšãä¿èšŒãããŸãã
React.cacheã䜿çšããå©ç¹ïŒ
- ããŒã¿ååŸã®ç°¡çŽ åïŒããŒã¿ååŸããã©ãŒãã³ã¹ã®æé©åã容æã«ãªããŸãã
- èªåãã£ãã·ã¥ç¡å¹åïŒããŒã¿ã倿Žããããšãã«èªåçã«ãã£ãã·ã¥ãç¡å¹åããããšã§ããã£ãã·ã¥ç®¡çãç°¡çŽ åããŸãã
- ããã©ãŒãã³ã¹ã®åäžïŒäžèŠãªAPIåŒã³åºããšèšç®ãåæžããå¿çæéãççž®ããŸãã
React.cacheã䜿çšããéã®èæ
®äºé
ïŒ
- å®éšçAPIïŒ
React.cacheã¯ãŸã å®éšçãªAPIã§ãããããå°æ¥ã®ReactããŒãžã§ã³ã§ãã®åäœã倿Žãããå¯èœæ§ããããŸãã - ãµãŒããŒã³ã³ããŒãã³ãïŒäž»ã«ReactãµãŒããŒã³ã³ããŒãã³ãïŒRSCïŒã§ã®äœ¿çšãæå³ããŠãããããã§ã¯ããŒã¿ååŸããµãŒããŒãšããèªç¶ã«çµ±åãããŠããŸãã
- ãã£ãã·ã¥ç¡å¹åæŠç¥ïŒReactãã©ã®ããã«ãã£ãã·ã¥ãç¡å¹åããããçè§£ããããšã¯ãããŒã¿ã®äžè²«æ§ã確ä¿ããããã«äžå¯æ¬ ã§ãã
useMemoïŒå€ã®ã¡ã¢å
useMemoã¯ãèšç®çµæãã¡ã¢åããReactããã¯ã§ãã颿°ãšäŸåé
åãåŒæ°ãšããŠåããŸãã颿°ã¯ãäŸåé¢ä¿ã®ããããã倿Žãããå Žåã«ã®ã¿å®è¡ãããŸãããã以å€ã®å ŽåãuseMemoã¯åã®ã¬ã³ããªã³ã°ãããã£ãã·ã¥ãããçµæãè¿ããŸãã
æ§æïŒ
```javascript const memoizedValue = useMemo(() => { // Expensive calculation return computeExpensiveValue(a, b); }, [a, b]); // Dependencies ```äŸïŒæŽŸçå€ã®ã¡ã¢å
```javascript import React, { useMemo, useState } from 'react'; function ProductList({ products }) { const [filter, setFilter] = useState(''); const filteredProducts = useMemo(() => { console.log('Filtering products...'); return products.filter(product => product.name.toLowerCase().includes(filter.toLowerCase()) ); }, [products, filter]); return (-
{filteredProducts.map(product => (
- {product.name} ))}
ãã®äŸã§ã¯ãuseMemoã¯filteredProductsé
åãã¡ã¢åããŸãããã£ã«ã¿ãªã³ã°ããžãã¯ã¯ãproductsé
åãŸãã¯filterã®ç¶æ
ã倿Žãããå Žåã«ã®ã¿å®è¡ãããŸããããã«ããããã¹ãŠã®ã¬ã³ããªã³ã°ã§äžèŠãªãã£ã«ã¿ãªã³ã°ã鲿¢ãããç¹ã«å€§ããªååãªã¹ãã®å Žåã«ããã©ãŒãã³ã¹ãåäžããŸãã
useMemoã䜿çšããå©ç¹ïŒ
- ã¡ã¢åïŒäŸåé¢ä¿ã«åºã¥ããŠèšç®çµæããã£ãã·ã¥ããŸãã
- ããã©ãŒãã³ã¹æé©åïŒã³ã¹ãã®é«ãå€ã®äžèŠãªåèšç®ãé²ããŸãã
useMemoã䜿çšããéã®èæ
®äºé
ïŒ
- äŸåé åïŒæ£ããã¡ã¢åãä¿èšŒããããã«ã¯ãäŸåé åãæ£ç¢ºã«å®çŸ©ããããšãäžå¯æ¬ ã§ããäžæ£ç¢ºãªäŸåé åã¯ãå€ãå€ãäžèŠãªåèšç®ã«ã€ãªããå¯èœæ§ããããŸãã
- é床ã®äœ¿çšïŒã¡ã¢åã®ãªãŒããŒããããå©ç¹ãäžåãããšããããããç¹ã«åçŽãªèšç®ã«å¯ŸããŠã¯
useMemoã®é床ã®äœ¿çšãé¿ããŠãã ããã
useCallbackïŒé¢æ°ã®ã¡ã¢å
useCallbackã¯ã颿°å®çŸ©ãã¡ã¢åããReactããã¯ã§ãã颿°ãšäŸåé
åãåŒæ°ãšããŠåããŸããäŸåé¢ä¿ã®ããããã倿Žãããªãéããã¬ã³ããªã³ã°ãè¶ããŠåã颿°ã€ã³ã¹ã¿ã³ã¹ãè¿ããŸããããã¯ãåã³ã³ããŒãã³ãã«ã³ãŒã«ããã¯ãæž¡ãéã«ç¹ã«äŸ¿å©ã§ããããã®ã³ã³ããŒãã³ãã®äžèŠãªåã¬ã³ããªã³ã°ãé²ãããšãã§ããŸãã
æ§æïŒ
```javascript const memoizedCallback = useCallback(() => { // Function logic }, [dependencies]); ```äŸïŒã³ãŒã«ããã¯é¢æ°ã®ã¡ã¢å
```javascript import React, { useState, useCallback } from 'react'; function Button({ onClick, children }) { console.log('Button re-rendered!'); return ; } const MemoizedButton = React.memo(Button); function ParentComponent() { const [count, setCount] = useState(0); const handleClick = useCallback(() => { setCount(c => c + 1); }, []); return (Count: {count}
ãã®äŸã§ã¯ãuseCallbackãhandleClick颿°ãã¡ã¢åããŠããŸããMemoizedButtonã³ã³ããŒãã³ãã¯ãpropsã倿ŽãããŠããªãå Žåã«åã¬ã³ããªã³ã°ãé²ãããã«React.memoã§ã©ãããããŠããŸããuseCallbackããªããã°ãhandleClick颿°ã¯ParentComponentã®ãã¹ãŠã®ã¬ã³ããªã³ã°ã§åäœæãããMemoizedButtonãäžå¿
èŠã«åã¬ã³ããªã³ã°ãããåå ãšãªããŸããuseCallbackã䜿çšãããšãhandleClick颿°ã¯äžåºŠã ãåäœæãããMemoizedButtonã®äžèŠãªåã¬ã³ããªã³ã°ãé²ããŸãã
useCallbackã䜿çšããå©ç¹ïŒ
- ã¡ã¢åïŒäŸåé¢ä¿ã«åºã¥ããŠé¢æ°ã€ã³ã¹ã¿ã³ã¹ããã£ãã·ã¥ããŸãã
- äžèŠãªåã¬ã³ããªã³ã°ã®é²æ¢ïŒã¡ã¢åããã颿°ãpropãšããŠäŸåããåã³ã³ããŒãã³ãã®äžèŠãªåã¬ã³ããªã³ã°ãé²ããŸãã
useCallbackã䜿çšããéã®èæ
®äºé
ïŒ
- äŸåé åïŒæ£ããã¡ã¢åãä¿èšŒããããã«ã¯ãäŸåé åãæ£ç¢ºã«å®çŸ©ããããšãäžå¯æ¬ ã§ããäžæ£ç¢ºãªäŸåé åã¯ãå€ã颿°ã¯ããŒãžã£ã«ã€ãªããå¯èœæ§ããããŸãã
- é床ã®äœ¿çšïŒã¡ã¢åã®ãªãŒããŒããããå©ç¹ãäžåãããšããããããç¹ã«åçŽãªé¢æ°ã«å¯ŸããŠã¯
useCallbackã®é床ã®äœ¿çšãé¿ããŠãã ããã
React.memoïŒã³ã³ããŒãã³ãã®ã¡ã¢å
React.memoã¯ã颿°ã³ã³ããŒãã³ããã¡ã¢åããé«éã³ã³ããŒãã³ãïŒHOCïŒã§ããpropsã倿ŽãããŠããªãå Žåãã³ã³ããŒãã³ãã®åã¬ã³ããªã³ã°ãé²ããŸããããã«ãããã¬ã³ããªã³ã°ã«ã³ã¹ãããããã³ã³ããŒãã³ããé »ç¹ã«åã¬ã³ããªã³ã°ãããã³ã³ããŒãã³ãã®ããã©ãŒãã³ã¹ã倧å¹
ã«åäžãããããšãã§ããŸãã
æ§æïŒ
```javascript const MemoizedComponent = React.memo(MyComponent, [areEqual]); ```äŸïŒã³ã³ããŒãã³ãã®ã¡ã¢å
```javascript import React from 'react'; function DisplayName({ name }) { console.log('DisplayName re-rendered!'); returnHello, {name}!
; } const MemoizedDisplayName = React.memo(DisplayName); function App() { const [count, setCount] = React.useState(0); return (ãã®äŸã§ã¯ãReact.memoãDisplayNameã³ã³ããŒãã³ããã¡ã¢åããŠããŸããDisplayNameã³ã³ããŒãã³ãã¯ãname propã倿Žãããå Žåã«ã®ã¿åã¬ã³ããªã³ã°ãããŸããAppã³ã³ããŒãã³ããcountã®ç¶æ
ã倿Žããããšãã«åã¬ã³ããªã³ã°ãããŠããDisplayNameã¯ãã®propsãåããŸãŸã§ããããåã¬ã³ããªã³ã°ãããŸãããããã«ãããäžèŠãªåã¬ã³ããªã³ã°ãé²ãããããã©ãŒãã³ã¹ãåäžããŸãã
React.memoã䜿çšããå©ç¹ïŒ
- ã¡ã¢åïŒpropsã倿ŽãããŠããªãå Žåãã³ã³ããŒãã³ãã®åã¬ã³ããªã³ã°ãé²ããŸãã
- ããã©ãŒãã³ã¹æé©åïŒäžèŠãªã¬ã³ããªã³ã°ãåæžããããã©ãŒãã³ã¹ã®åäžã«ã€ãªãããŸãã
React.memoã䜿çšããéã®èæ
®äºé
ïŒ
- æµ
ãæ¯èŒïŒ
React.memoã¯propsã®æµ ãæ¯èŒãå®è¡ããŸããpropsããªããžã§ã¯ãã®å Žåããªããžã§ã¯ãã®å 容ã§ã¯ãªããåç §ã®ã¿ãæ¯èŒãããŸããæ·±ãæ¯èŒãè¡ãã«ã¯ãReact.memoã®ç¬¬2åŒæ°ãšããŠã«ã¹ã¿ã æ¯èŒé¢æ°ãæäŸã§ããŸãã - é床ã®äœ¿çšïŒpropæ¯èŒã®ãªãŒããŒããããå©ç¹ãäžåãããšããããããç¹ã«è¿
éã«ã¬ã³ããªã³ã°ãããåçŽãªã³ã³ããŒãã³ãã«å¯ŸããŠã¯
React.memoã®é床ã®äœ¿çšãé¿ããŠãã ããã
Reactã«ããã颿°çµæãã£ãã·ã¥ã®ãã¹ããã©ã¯ãã£ã¹
Reactã§é¢æ°çµæã®ãã£ãã·ã¥ã广çã«æŽ»çšããã«ã¯ã以äžã®ãã¹ããã©ã¯ãã£ã¹ãèæ ®ããŠãã ããïŒ
- ããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ããïŒReact DevToolsãä»ã®ãããã¡ã€ãªã³ã°ããŒã«ã䜿çšããŠãããã©ãŒãã³ã¹ã®åé¡ãåŒãèµ·ãããŠããã³ã³ããŒãã³ãã颿°ãç¹å®ããŸãããŸãããããã®é åã®æé©åã«éäžããŠãã ããã
- ã¡ã¢åãæŠç¥çã«äœ¿çšããïŒã¡ã¢åæè¡ïŒ
React.cache,useMemo,useCallback,React.memoïŒã¯ãããã©ãŒãã³ã¹ã«å€§ããªå©ç¹ãããå Žåã«ã®ã¿é©çšããŸããéåºŠã®æé©åã¯ãã³ãŒãã«äžèŠãªè€éããå ããå¯èœæ§ãããããé¿ããŠãã ããã - é©åãªããŒã«ãéžæããïŒç¹å®ã®ãŠãŒã¹ã±ãŒã¹ã«åºã¥ããŠé©åãªãã£ãã·ã¥ã¡ã«ããºã ãéžæããŸãã
React.cacheã¯ããŒã¿ååŸã«ãuseMemoã¯å€ã®ã¡ã¢åã«ãuseCallbackã¯é¢æ°ã®ã¡ã¢åã«ãReact.memoã¯ã³ã³ããŒãã³ãã®ã¡ã¢åã«æé©ã§ãã - äŸåé¢ä¿ãæ
éã«ç®¡çããïŒ
useMemoãšuseCallbackã«æäŸãããäŸåé åãæ£ç¢ºãã€å®å šã§ããããšã確èªããŠãã ãããäžæ£ç¢ºãªäŸåé åã¯ãå€ãå€ãäžèŠãªåèšç®ã«ã€ãªããå¯èœæ§ããããŸãã - äžå€ããŒã¿æ§é ãæ€èšããïŒäžå€ããŒã¿æ§é ã䜿çšãããšã
React.memoã§ã®propæ¯èŒãç°¡çŽ åãããã¡ã¢åã®å¹æãåäžããŸãã - ããã©ãŒãã³ã¹ãç£èŠããïŒãã£ãã·ã¥ãå®è£ ããåŸããã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãç¶ç¶çã«ç£èŠããæåŸ ãããå©ç¹ãåŸãããŠããããšã確èªããŠãã ããã
- ãã£ãã·ã¥ã®ç¡å¹åïŒ
React.cacheã«ã€ããŠã¯ãèªåãã£ãã·ã¥ç¡å¹åãçè§£ããŠãã ãããä»ã®ãã£ãã·ã¥æŠç¥ã«ã€ããŠã¯ãå€ãããŒã¿ãé²ãããã«é©åãªãã£ãã·ã¥ç¡å¹åããžãã¯ãå®è£ ããŠãã ããã
æ§ã ãªã°ããŒãã«ã·ããªãªã§ã®äŸ
颿°çµæã®ãã£ãã·ã¥ããããŸããŸãªã°ããŒãã«ã·ããªãªã§ã©ã®ããã«åœ¹ç«ã€ããèããŠã¿ãŸãããïŒ
- è€æ°ã®é貚ãæã€Eã³ããŒã¹ãã©ãããã©ãŒã ïŒè€æ°ã®é貚ããµããŒãããEã³ããŒã¹ãã©ãããã©ãŒã ã¯ãçŸåšã®çºæ¿ã¬ãŒãã«åºã¥ããŠäŸ¡æ Œã倿ããå¿ èŠããããŸããåååãšé貚ã®çµã¿åããã«ã€ããŠå€æåŸã®äŸ¡æ Œããã£ãã·ã¥ããããšã§ãçºæ¿ã¬ãŒããç¹°ãè¿ãååŸããããã®äžèŠãªAPIåŒã³åºããé²ãããšãã§ããŸãã
- ããŒã«ã©ã€ãºãããã³ã³ãã³ããæã€åœéåã¢ããªã±ãŒã·ã§ã³ïŒåœéåã¢ããªã±ãŒã·ã§ã³ã¯ããŠãŒã¶ãŒã®ãã±ãŒã«ã«åºã¥ããŠããŸããŸãªèšèªãšåœ¢åŒã§ã³ã³ãã³ãã衚瀺ããå¿ èŠããããŸããåãã±ãŒã«ã«å¯Ÿå¿ããããŒã«ã©ã€ãºãããã³ã³ãã³ãããã£ãã·ã¥ããããšã§ãåé·ãªãã©ãŒãããã翻蚳æäœãé²ãããšãã§ããŸãã
- ãžãªã³ãŒãã£ã³ã°ã䜿çšãããããã³ã°ã¢ããªã±ãŒã·ã§ã³ïŒäœæãå°ç座æšã«å€æããïŒãžãªã³ãŒãã£ã³ã°ïŒãããã³ã°ã¢ããªã±ãŒã·ã§ã³ã¯ããžãªã³ãŒãã£ã³ã°çµæããã£ãã·ã¥ããããšã§æ©æµãåããããšãã§ããŸããããã«ãããé »ç¹ã«æ€çŽ¢ãããäœæã«å¯Ÿãããžãªã³ãŒãã£ã³ã°ãµãŒãã¹ãžã®äžèŠãªAPIåŒã³åºããé²ããŸãã
- ãªã¢ã«ã¿ã€ã ã®æ ªäŸ¡ã衚瀺ããéèããã·ã¥ããŒãïŒãªã¢ã«ã¿ã€ã ã®æ ªäŸ¡ã衚瀺ããéèããã·ã¥ããŒãã¯ããã£ãã·ã¥ã䜿çšããŠææ°ã®æ ªäŸ¡ãååŸããããã®éå°ãªAPIåŒã³åºããåé¿ã§ããŸãããã£ãã·ã¥ã¯å®æçã«æŽæ°ãããAPIã®äœ¿çšãæå°éã«æããªãããã»ãŒãªã¢ã«ã¿ã€ã ã®ããŒã¿ãæäŸã§ããŸãã
çµè«
颿°çµæã®ãã£ãã·ã¥ã¯ãReactã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãæé©åããããã®åŒ·åãªææ³ã§ããã³ã¹ãã®é«ãèšç®ãããŒã¿ååŸæäœã®çµæãæŠç¥çã«ãã£ãã·ã¥ããããšã§ãCPU䜿çšçãåæžããå¿çæéãæ¹åãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããšãã§ããŸããReactã¯ãReact.cacheãuseMemoãuseCallbackãReact.memoãªã©ããã£ãã·ã¥ãå®è£
ããããã®ããã€ãã®çµã¿èŸŒã¿ããŒã«ãæäŸããŠããŸãããããã®ããŒã«ãçè§£ãããã¹ããã©ã¯ãã£ã¹ã«åŸãããšã§ã颿°çµæã®ãã£ãã·ã¥ã广çã«æŽ»çšããäžçäžã®ãŠãŒã¶ãŒã«ã·ãŒã ã¬ã¹ãªäœéšãæäŸãã髿§èœãªReactã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸãã
åžžã«ã¢ããªã±ãŒã·ã§ã³ããããã¡ã€ãªã³ã°ããŠããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ãããã£ãã·ã¥æé©åã®åœ±é¿ã枬å®ããããšãå¿ããªãã§ãã ãããããã«ãããæ å ±ã«åºã¥ããæææ±ºå®ãè¡ããæãŸããããã©ãŒãã³ã¹æ¹åãéæããããšãã§ããŸãã